<template>
  <div>
    <!-- 菜单管理 -->
    <div class="all">
      <!-- 搜索框 -->
      <div class="search_box">
        <div>
          <div class="search_title">角色名称</div>
          <div>
            <el-input class="inputs" placeholder="请输入标题" />
          </div>
        </div>
        <div class="search_righ">
          <div class="search_title">菜单id</div>
          <div>
            <el-input class="inputs" placeholder="请输入标题" />
          </div>
        </div>
      </div>
      <div class="line"></div>
      <div class="button_box">
        <el-button type="primary" class="butten">新增</el-button>
        <el-button type="danger" class="butten">批量删除</el-button>
      </div>
      <div class="table_box">
        <el-table :data="tableData" >
          <el-table-column type="selection" width="55" />
          <el-table-column label="序号" width="120" align="center">
            <template #default="scope">{{ scope.row.id }}</template>
          </el-table-column>
          <el-table-column property="name" label="角色名称" align="center" show-overflow-tooltip />
          <el-table-column property="menus_id" label="菜单id" align="center" show-overflow-tooltip />
          <el-table-column property="createtime" label="创建时间" align="center" show-overflow-tooltip/>
          <el-table-column property="address" label="操作" align="center">
            <template #default="scope">
              <el-button type="primary" text>编辑</el-button>
              <el-button type="danger" text>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
import { url } from "/@/api/url"
import { noticeGet } from "/@/api/public/role/index";
import { fileUpload } from "/@/api/login/index";
import "/src/css/business.css";
import { Plus } from "@element-plus/icons-vue";

const data = ref([]); // 原始数据（初始化为空数组）
const tableData = ref([]); // 表格显示的分页数据
const filteredData = ref([]); // 过滤后的数据（初始化为空数组）

// 分页相关变量
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

onMounted(() => {
  noticeGet().then((res) => {
    console.log(res);
    // 确保数据是数组类型，避免非数组赋值
    data.value = Array.isArray(res.data.list) ? res.data.list : [];
    filteredData.value = data.value; // 初始化过滤后的数据
    total.value = data.value.length;
    updateTableData();
    console.log(data.value);
  });
});

function handleCurrentChange(newCurrentPage: number) {
  currentPage.value = newCurrentPage;
  updateTableData();
}

// 更新表格数据（分页处理）
function updateTableData() {
  // 防御性检查：确保filteredData是数组
  if (!Array.isArray(filteredData.value)) {
    filteredData.value = [];
    console.warn("filteredData 不是数组，已重置为空数组");
  }
  
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  tableData.value = filteredData.value.slice(start, end);
}

// 处理分页事件
function handleSizeChange(newPageSize: number) {
  pageSize.value = newPageSize;
  currentPage.value = 1; // 重置当前页码
  updateTableData();
}
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.inputs {
  width: 240px;
  height: 30px
}
</style>
<style lang="scss">
.el-table .el-table__cell.is-center {
  position: unset !important;

}
</style>